<template>
  <div class="pic-back">
    <div class="pic-list">
      <ul class="pic-con">
        <li class="list-item">
          <img src="./images/brand_03.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_05.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_07.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_09.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_11.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_13.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_15.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_17.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_19.png" alt="加载失败" />
        </li>
        <li class="list-item">
          <img src="./images/brand_21.png" alt="加载失败" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "BottomList",
};
</script>
<style lang="less" scoped>
.pic-back {
  margin: 10px 0;
  .pic-list {
    width: 1200px;
    margin: 0 auto;
    .pic-con {
      background-color: #f7f7f7;
      padding: 15px 0;
      display: flex;
      .list-item {
        width: 120px;
        height: 37px;
        img {
          padding: 0 10px;
        }
      }
      li + li img {
        border-left: 1px dotted #ccc;
      }
    }
  }
}
</style>